Frontend ekrano budinimo užraktas: ekrano užmigimo prevencija siekiant geresnės naudotojo patirties

Šiandieniniame skaitmeniniame pasaulyje naudotojai sąveikauja su web programomis ir mobiliosiomis patirtimis įvairiuose įrenginiuose ir operacinėse sistemose. Svarbus teigiamos naudotojo patirties aspektas yra užtikrinti, kad įrenginio ekranas išliktų aktyvus, kai to reikia. Screen Wake Lock API siūlo galingą sprendimą, leidžiantį kūrėjams neleisti įrenginio ekranui pritemti arba užsirakinti, taip pagerinant naudojimą ir įtraukimą naudotojams visame pasaulyje.

Problemos supratimas: ekrano užmigimas ir jo poveikis

Įsivaizduokite naudotoją Tokijuje, Japonijoje, žiūrintį ilgą vaizdo įrašo pamoką planšetiniame kompiuteryje, mokantis naujo įgūdžio. Arba galbūt gydytojas San Paule, Brazilijoje, peržiūrintis medicininius įrašus mobiliajame įrenginyje konsultacijos metu. Jei įrenginio ekranas pritemsta arba užsirakina sesijos viduryje, tai gali sutrikdyti naudotojo patirtį, sukelti nusivylimą ir galimą įsitraukimo praradimą. Ši problema ypač ryški tokiose programose kaip:

• Vaizdo grotuvai: Nepertraukiamam vaizdo įrašo atkūrimui reikia, kad ekranas liktų aktyvus.
• E-mokymosi platformos: Ekrano matomumo išlaikymas yra būtinas pamokų ir viktorinų metu.
• Navigacijos programos: Ekrano laikymas įjungtu navigacijos metu yra labai svarbus saugumui ir naudojimo paprastumui.
• Medicininės programos: Gydytojams ir slaugytojams reikia matomų ekranų, kai jie peržiūri paciento informaciją arba procedūrų metu.
• Interaktyvūs žaidimai: Ilgalaikis žaidimas reikalauja, kad ekranas liktų įjungtas.

Numatytasis daugumos įrenginių elgesys apima ekrano pritemdymą po tam tikro neveiklumo laikotarpio, siekiant taupyti akumuliatoriaus energiją. Nors tai dažnai pageidautina, tam tikrose programose tai tampa naudojimo kliūtimi. Screen Wake Lock API suteikia kūrėjams galimybę nepaisyti šio numatytojo elgesio, užtikrinant, kad ekranas liktų aktyvus, kai to reikia.

Pristatome Screen Wake Lock API

Screen Wake Lock API yra web API, kuri suteikia mechanizmą web programoms neleisti įrenginio ekranui pritemti arba užsirakinti. Jis sukurtas kaip privatumą gerbiantis ir naudotojui patogus sprendimas, leidžiantis kūrėjams prašyti ekrano budinimo užraktų tik tada, kai tai tikrai būtina. API yra sukurta remiantis naudotojo sutikimo principu ir yra įdiegta daugumoje šiuolaikinių naršyklių, įskaitant Chrome, Firefox ir Edge.

Pagrindinės sąvokos

• `navigator.wakeLock`: Ši savybė suteikia prieigą prie Screen Wake Lock API.
• `request()`: Šis metodas naudojamas ekrano budinimo užraktui prašyti. Jis priima budinimo užrakto tipą kaip argumentą (šiuo metu palaikomas tik 'screen').
• `release()`: Šis metodas atleidžia anksčiau įgytą ekrano budinimo užraktą.
• Budinimo užrakto tipai: API palaiko skirtingus budinimo užraktų tipus. Šiuo metu palaikomas tik tipas 'screen'. Ateityje API potencialiai galėtų palaikyti kitus tipus, pvz., CPU budinimo užraktus arba įrenginio budinimo užraktus.

Screen Wake Lock API įdiegimas

Screen Wake Lock API įdiegimas apima keletą paprastų veiksmų. Panagrinėkime pagrindinius etapus su kodo pavyzdžiais, kad iliustruotume procesą.

1. API palaikymo tikrinimas

Prieš bandant naudoti API, labai svarbu patikrinti, ar naudotojo naršyklė ją palaiko. Tai galima pasiekti patikrinant, ar egzistuoja savybė `navigator.wakeLock`:

            if ('wakeLock' in navigator) {
  // Screen Wake Lock API is supported
  console.log('Screen Wake Lock API supported!');
} else {
  // Screen Wake Lock API is not supported
  console.log('Screen Wake Lock API not supported.');
}

            

              
                Copy
              
            
          

2. Ekrano budinimo užrakto prašymas

Įdiegimo esmė yra ekrano budinimo užrakto prašymas naudojant metodą `request()`. Šis metodas grąžina Promise, kuris išsprendžiamas su `WakeLockSentinel` objektu, jei užklausa yra sėkminga. `WakeLockSentinel` objektas suteikia informaciją apie budinimo užraktą ir leidžia jį atleisti.

Štai kaip prašyti ekrano budinimo užrakto:

            
let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
    // Handle the error, e.g., show an error message to the user.
  }
}

            

              
                Copy
              
            
          

Šiame kode:

• Apibrėžiame kintamąjį `wakeLock`, kad laikytume `WakeLockSentinel` objektą.
• Naudojame `async` funkciją `requestWakeLock()`, kad apdorotume asinchroninę API prigimtį.
• Iškviečiame `navigator.wakeLock.request('screen')`, kad paprašytume ekrano budinimo užrakto.
• Jei užklausa yra sėkminga, mes įrašome pranešimą į konsolę.
• Pridedame `release` įvykio klausytoją prie `wakeLock` objekto, kad aptiktume, kada budinimo užraktas atleidžiamas (pvz., dėl to, kad kortelė uždaroma arba naudotojas pereina tolyn).
• Įtraukiame klaidų apdorojimą, kad grakščiai valdytume galimas nesėkmes, pvz., leidimų problemas arba palaikymo trūkumą.

3. Ekrano budinimo užrakto atleidimas

Labai svarbu atleisti ekrano budinimo užraktą, kai jo nebereikia. Tai galima padaryti naudojant `WakeLockSentinel` objekto metodą `release()`. Tai ypač svarbu taupyti akumuliatoriaus energiją ir gerbti naudotojo įrenginio nustatymus.

Štai kaip atleisti ekrano budinimo užraktą:

            
function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

            

              
                Copy
              
            
          

Šiame kode:

• Patikriname, ar egzistuoja budinimo užraktas.
• Iškviečiame `wakeLock.release()`, kad atleistume užraktą. Metodas `release()` grąžina `Promise`, kuris išsprendžiamas, kai užraktas atleidžiamas.
• Įrašome pranešimą į konsolę, kad nurodytume atleidimą.
• Nustatome `wakeLock` į `null`, kad nurodytume, jog užraktas buvo atleistas.

Funkcija `releaseWakeLock()` turėtų būti iškviesta, kai programai nebereikia, kad ekranas liktų įjungtas. Tai gali sukelti:

• Naudotojas uždaro kortelę arba pereina tolyn nuo puslapio.
• Programa baigia užduotį, kuriai reikėjo, kad ekranas būtų aktyvus (pvz., baigiasi vaizdo įrašo atkūrimas).
• Naudotojas aiškiai prašo atleisti budinimo užraktą (pvz., per mygtuką).

4. Integracija su programos logika

Įdiegimas turi būti integruotas į konkrečią programos logiką. Pavyzdžiui, vaizdo grotuve galite paprašyti budinimo užrakto, kai vaizdo įrašas pradedamas leisti, ir atleisti jį, kai vaizdo įrašas pristabdomas arba baigiasi. E-mokymosi platformoje galite paprašyti budinimo užrakto pamokos metu ir atleisti jį, kai naudotojas pereina į kitą skyrių. Budinimo užrakto prašymo ir atleidimo laikas yra labai svarbus norint užtikrinti gerą naudotojo patirtį.

Štai hipotetinis pavyzdys, kaip jį integruoti į vaizdo grotuvą:

            
const videoElement = document.getElementById('myVideo');
const playButton = document.getElementById('playButton');
const pauseButton = document.getElementById('pauseButton');

let wakeLock = null;

async function requestWakeLock() {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    console.log('Screen Wake Lock acquired!');
    wakeLock.addEventListener('release', () => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
}

function releaseWakeLock() {
  if (wakeLock) {
    wakeLock.release().then(() => {
      console.log('Screen Wake Lock released!');
      wakeLock = null;
    });
  }
}

playButton.addEventListener('click', () => {
  videoElement.play();
  requestWakeLock();
});

pauseButton.addEventListener('click', () => {
  videoElement.pause();
  releaseWakeLock();
});

videoElement.addEventListener('ended', () => {
  releaseWakeLock();
});

            

              
                Copy
              
            
          

Šiame vaizdo grotuvo pavyzdyje:

• Budinimo užraktas prašomas, kai vaizdo įrašas pradedamas leisti (`playButton.addEventListener`).
• Budinimo užraktas atleidžiamas, kai vaizdo įrašas pristabdomas (`pauseButton.addEventListener`).
• Budinimo užraktas taip pat atleidžiamas, kai vaizdo įrašas baigiasi (`videoElement.addEventListener('ended')`).

Geriausia praktika ir svarstymai

Efektyvus Screen Wake Lock API įdiegimas apima geriausios praktikos laikymąsi, siekiant užtikrinti teigiamą ir privatumą gerbiančią naudotojo patirtį. Štai keletas pagrindinių aspektų:

1. Naudotojo sutikimas ir skaidrumas

Visada būkite skaidrūs su naudotojais dėl to, kodėl naudojate Screen Wake Lock API. Aiškiai praneškite, kodėl neleidžiate ekranui užmigti. Apsvarstykite galimybę pateikti perjungiklį arba nustatymą, leidžiantį naudotojams valdyti, ar ekrano budinimo užraktas yra aktyvus. Tai suteikia naudotojams įgaliojimus ir kontrolę savo įrenginio elgesiui. Jurisdikcijose visame pasaulyje naudotojo sutikimo gerbimas tampa vis svarbesnis duomenų privatumo teisės aktuose.

2. Kontekstinis naudojimas

Prašykite ekrano budinimo užrakto tik tada, kai tai tikrai būtina. Venkite jį naudoti beatodairiškai, nes tai gali neigiamai paveikti akumuliatoriaus energiją ir erzinti naudotojus. Apsvarstykite naudotojo veiklos kontekstą. Pavyzdžiui, jei naudotojas skaito straipsnį naujienų programoje, ekrano budinimo užraktas gali būti nebūtinas, bet jei jis žiūri vaizdo įrašą, įdėtą į straipsnį, tai gali būti tinkama.

3. Tinkamas atleidimas

Užtikrinkite, kad ekrano budinimo užraktas visada būtų atleidžiamas, kai jo nebereikia. Tai labai svarbu taupyti akumuliatoriaus energiją ir gerbti naudotojo pageidavimus. Naudokite įvykių klausytojus (pvz., `visibilitychange`, `beforeunload`, `pagehide`), kad aptiktumėte, kada naudotojas pereina tolyn nuo puslapio arba uždaro kortelę, ir atleiskite budinimo užraktą atitinkamai.

4. Klaidų apdorojimas

Įdiekite patikimą klaidų apdorojimą, kad grakščiai valdytumėte galimas problemas, pvz., leidimų klaidas arba naršyklės nesuderinamumus. Informuokite naudotoją, jei ekrano budinimo užrakto užklausa nepavyksta, ir pateikite alternatyvius variantus, jei reikia. Naudingų klaidų pranešimų pateikimas skirtingomis kalbomis būtų naudingas pasaulinei auditorijai.

5. Akumuliatoriaus sunaudojimas

Atminkite akumuliatoriaus sunaudojimą. Nors Screen Wake Lock API yra sukurta taip, kad būtų taupi akumuliatoriui, nuolatinis ekrano laikymas įjungtu neišvengiamai išeikvos akumuliatorių greičiau nei leidžiant įrenginiui užmigti. Sukurkite savo programą taip, kad ji būtų efektyvi kitais būdais, pvz., optimizuodami vaizdo įrašo atkūrimą ir sumažindami CPU naudojimą, kad sumažintumėte bendrą poveikį akumuliatoriaus energijai.

6. Prieinamumo aspektai

Atsižvelkite į naudotojus su negalia. Užtikrinkite, kad jūsų įdiegimas būtų prieinamas naudotojams su skirtingais poreikiais. Pavyzdžiui, pateikite alternatyvius būdus naudotojams valdyti ekrano budinimo užraktą, jei jiems sunku naudoti standartinius valdiklius. Išbandykite savo programą su ekrano skaitytuvais ir kitomis pagalbinėmis technologijomis, kad užtikrintumėte suderinamumą. Laikytis Web Content Accessibility Guidelines (WCAG) yra būtina pasauliniam naudojimui.

7. Testavimas įvairiuose įrenginiuose ir naršyklėse

Išbandykite savo įdiegimą įvairiuose įrenginiuose ir naršyklėse, kad užtikrintumėte suderinamumą ir nuoseklų elgesį. Skirtingi įrenginiai ir naršyklės gali turėti skirtingas energijos valdymo strategijas ir ekrano elgesį. Kryžminis naršyklių testavimas yra labai svarbus norint pasiekti pasaulinę auditoriją. Geriausias požiūris apima testavimą skirtingose platformose ir operacinėse sistemose, įskaitant Android, iOS, Windows, macOS ir Linux.

8. Funkcijų aptikimas

Visada naudokite funkcijų aptikimą, kad patikrintumėte Screen Wake Lock API prieinamumą prieš bandydami ją naudoti. Tai užtikrina, kad jūsų programa grakščiai pablogės ir neatsiras gedimų, jei API nepalaiko naudotojo naršyklė.

Realūs pavyzdžiai ir pasaulinės programos

Screen Wake Lock API turi daug programų įvairiose pramonės šakose ir naudojimo atvejais. Štai keletas pavyzdžių, iliustruojančių jo praktinę svarbą:

• Sveikatos priežiūra: Medicinos specialistai ligoninėse ir klinikose įvairiose šalyse, pavyzdžiui, Indijoje ir Nigerijoje, gali naudoti šią API, kad paciento stebėjimo sistemos arba medicinos prietaisų sąsajos būtų matomos procedūrų metu.
• Švietimas: Internetinės mokymosi platformos, pvz., tos, kurias naudoja studentai Kanadoje ar Australijoje, gali užtikrinti, kad ekranas liktų aktyvus interaktyvių pamokų, viktorinų ir vaizdo paskaitų metu.
• Gamyba: Gamyklų darbuotojai Vokietijoje ar Japonijoje gali naudoti šią API, kad gamybos stebėjimo prietaisų skydeliai būtų matomi planšetiniuose kompiuteriuose ar kituose įrenginiuose, užkertant kelią gamybos sutrikimams.
• Transportas: Sunkvežimių vairuotojai Jungtinėse Amerikos Valstijose arba pristatymo personalas Brazilijoje gali laikyti navigacijos programas aktyvias savo įrenginiuose.
• Fitnesas: Naudotojai Prancūzijoje ar Pietų Korėjoje gali naudoti šią API fitneso stebėjimo prietaisams treniruočių metu.
• Interaktyvūs kioskai: Interaktyvūs kioskai viešosiose erdvėse tokiose šalyse kaip Jungtinė Karalystė ar Kinija laikys savo ekranus aktyvius, kad įtrauktų naudotojus.

Privalumai ir trūkumai

Privalumai

• Pagerinta naudotojo patirtis: Užtikrina sklandžią patirtį, neleidžiant ekranui pritemti arba užsirakinti.
• Patobulintas naudojimas: Padaro programas labiau naudojamas situacijose, kai ekranas turi likti aktyvus.
• Kryžminio platformos suderinamumas: Veikia skirtingose naršyklėse ir įrenginiuose.
• Į privatumą orientuota: Sukurta atsižvelgiant į naudotojo privatumą ir reikalauja naudotojo sutikimo.

Trūkumai

• Akumuliatoriaus išeikvojimas: Ekrano laikymas įjungtu gali išeikvoti akumuliatorių greičiau.
• Naudotojo erzulys: Gali erzinti naudotojus, jei naudojama netinkamai arba be skaidrumo.
• Naršyklės palaikymas: Reikia naršyklės palaikymo (nors plačiai prieinamas šiuolaikinėse naršyklėse).
• Galimos leidimų problemos: Kai kuriose platformose gali būti taikomos leidimų užklausos.

Alternatyvos ir svarstymai

Nors Screen Wake Lock API siūlo tiesioginį sprendimą, kūrėjai gali ištirti alternatyvius metodus ir svarstymus.

1. `setInterval()` ir periodiniai atnaujinimai

Prieš pristatant Screen Wake Lock API, kai kurie kūrėjai naudojo `setInterval()`, kad periodiškai atnaujintų turinį arba siųstų signalą į serverį, neleisdami įrenginiui įjungti miego režimą. Tačiau šis metodas gali būti mažiau patikimas ir daugiau išteklių reikalaujantis. Jis taip pat gali būti suvokiamas kaip apeiga, o ne gerai apibrėžtas sprendimas.

2. `requestFullscreen()` ir įtraukiančios patirtys

Programoms, kurios apima viso ekrano režimą, `requestFullscreen()` API gali netiesiogiai neleisti ekranui užmigti kai kuriuose įrenginiuose. Tačiau tai nėra garantuotas elgesys ir gali skirtis priklausomai nuo įrenginio ir naršyklės. Jis visų pirma orientuojasi į viso ekrano rodinį, o ne į ekrano miego elgesio valdymą.

3. Operacinės sistemos lygio nustatymai

Naudotojai paprastai gali reguliuoti savo įrenginio ekrano išjungimo nustatymus operacinėje sistemoje (pvz., Windows, macOS, Android, iOS). Kūrėjai turėtų informuoti naudotojus, kad ekrano miego elgesį valdo įrenginio nustatymai. Kūrėjai idealiai turėtų naudoti API ir leisti naudotojui nuspręsti, ar įjungti/išjungti ekrano užraktą, pateikiant perjungiklį arba nustatymą.

4. Energijos valdymo API (būsimos kryptys)

Screen Wake Lock API vis dar tobulėja. Būsimi patobulinimai galėtų apimti detalesnę ekrano elgesio kontrolę, pvz., galimybę valdyti ryškumą arba pritemdymo lygį. API galėtų integruotis su kitomis energijos valdymo API, pvz., API, kurios galėtų stebėti ir reaguoti į įrenginio energijos būseną, kad būtų sukurta geriau optimizuota naudotojo patirtis.

Prieinamumas ir internacionalizacija

Prieinamumo aspektai

• Navigacija klaviatūra: Užtikrinkite, kad visi valdikliai (pvz., mygtukai, žymės langeliai) būtų prieinami per klaviatūrą.
• Ekrano skaitytuvai: Patikrinkite, ar pagalbinės technologijos, pvz., ekrano skaitytuvai, teikia tikslią informaciją apie dabartinę programos būseną. `release` įvykį turėtų paskelbti ekrano skaitytuvas.
• Spalvų kontrastas: Vykdykite WCAG gaires, kad užtikrintumėte pakankamą kontrasto tarp teksto ir fono, kad būtų geriau skaitoma.
• Alternatyvusis tekstas: Naudokite tinkamą alt tekstą visiems vaizdams ir grafikai.
• Tinkami ARIA atributai: Naudokite ARIA atributus (pvz., `aria-label`, `aria-describedby`), kad pateiktumėte papildomos informacijos pagalbinėms technologijoms.

Internacionalizacijos aspektai

• Vertimas: Išverskite visą tekstą ir UI elementus į kalbas, kurias palaiko jūsų programa. Naudokite patikimą vertimo biblioteką ir užtikrinkite teisingą simbolių kodavimą (UTF-8).
• Datos ir laiko formatavimas: Formatuokite datas ir laiką pagal naudotojo lokalę. Naudokite bibliotekas, tokias kaip `Intl`, datos/laiko formatavimui.
• Skaičių formatavimas: Formatuokite skaičius, įskaitant valiutą, pagal naudotojo lokalę.
• Palaikymas iš dešinės į kairę (RTL): Jei palaikote kalbas, kurios rašomos iš dešinės į kairę (pvz., arabų, hebrajų), užtikrinkite, kad jūsų programos išdėstymas būtų pritaikytas teisingai.
• Valiutos formatavimas: Tvarkykite valiutos simbolius ir formatavimą tinkamai, atsižvelgdami į naudotojo regioną.

Išvada: Naudotojo patirties gerinimas visame pasaulyje

Screen Wake Lock API siūlo vertingą įrankį frontend kūrėjams, siekiantiems pagerinti naudotojo patirtį įvairiose web programose ir mobiliosiose aplinkose. Suprasdami API galimybes, laikydamiesi geriausios praktikos ir apgalvotai integruodami ją į savo projektus, galite sukurti labiau įtraukiančias, naudotojui patogias ir globaliai prieinamas programas.

Aktyviai spręsdami ekrano miego elgesį, galite užkirsti kelią trikdžiams ir pagerinti bendrą naudotojo patirtį, nesvarbu, ar jūsų naudotojai yra Londone, Pekine ar Lagose. Atminkite, kad visada turite teikti pirmenybę naudotojo sutikimui, užtikrinti skaidrumą ir nedelsiant atleisti ekrano budinimo užraktą, kai jo nebereikia, kad užtikrintumėte pagarbų ir atsakingą požiūrį.

Tobulėjant web technologijoms, Screen Wake Lock API greičiausiai taps dar svarbesnė kuriant šiuolaikines web programas, kurios gali užtikrinti sklandžią, įtraukiančią ir globaliai prieinamą patirtį naudotojams visur. Priimkite šios API galią ir kurkite geresnę web patirtį savo naudotojams visame pasaulyje!